<template>
  <div class="nav-tabs" ref="tabScrollbarRef">
    <div v-for="(item, idx) in navTabs.state.tabsView" @click="onTab(item)"
      @contextmenu.prevent="onContextmenu(item, $event)" class="ba-nav-tab"
      :class="navTabs.state.activeIndex == idx ? 'active' : ''" :ref="tabsRefs.set" :key="idx">
      {{ item.meta.title }}
      <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
        <Icon v-show="navTabs.state.tabsView.length > 1" style="font-size: 15px;" class="close-icon"
          @click.stop="closeTab(item)" size="15" name="el-icon-Close">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="height: 1em;width: 1em;">
            <path fill="currentColor"
              d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z">
            </path>
          </svg>
        </Icon>
      </transition>
    </div>
    <div :style="activeBoxStyle" class="nav-tabs-active-box"></div>
  </div>
  <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useTemplateRefsList } from 'vueuse/core'
import useCurrentInstance from '@/utils/useCurrentInstance'
import Contextmenu from './contextmenu.vue'
import horizontalScroll from '@/utils/horizontalScroll'
import { getFirstRoute, routePush } from '@/utils/router'

const route = useRoute()
const router = useRouter()
const config = useConfig()
const navTabs = useNavTabs()
const { proxy } = useCurrentInstance()
const tabScrollbarRef = ref()
const tabsRefs = useTemplateRefsList()

const contextmenuRef = ref()

const state = reactive({
  contextmenuItems: [
    { name: 'refresh', label: '重新加载', icon: 'fa fa-refresh' },
    { name: 'close', label: '关闭标签', icon: 'fa fa-times' },
    { name: 'fullScreen', label: '当前标签全屏', icon: 'el-icon-FullScreen' },
    { name: 'closeOther', label: '关闭其他标签', icon: 'fa fa-minus' },
    { name: 'closeAll', label: '关闭全部标签', icon: 'fa fa-stop' },
  ],
})

const activeBoxStyle = reactive({
  width: '0',
  transform: 'translateX(0px)',
})
const onTab = (menu) => {
  router.push(menu)
}

const onContextmenu = (menu, el) => {
  // 禁用刷新
  state.contextmenuItems[0].disabled = route.path !== menu.path
  // 禁用关闭其他和关闭全部
  state.contextmenuItems[4].disabled = state.contextmenuItems[3].disabled = navTabs.state.tabsView.length == 1 ? true : false

  const { clientX, clientY } = el
  contextmenuRef.value.onShowContextmenu(menu, {
    x: clientX,
    y: clientY,
  })
}

// tab 激活状态切换
const selectNavTab = function (dom) {
  if (!dom) {
    return false
  }
  activeBoxStyle.width = dom.clientWidth + 'px'
  activeBoxStyle.transform = `translateX(${dom.offsetLeft}px)`

  let scrollLeft = dom.offsetLeft + dom.clientWidth - tabScrollbarRef.value.clientWidth
  if (dom.offsetLeft < tabScrollbarRef.value.scrollLeft) {
    tabScrollbarRef.value.scrollTo(dom.offsetLeft, 0)
  } else if (scrollLeft > tabScrollbarRef.value.scrollLeft) {
    tabScrollbarRef.value.scrollTo(scrollLeft, 0)
  }
}

const toLastTab = () => {
  const lastTab = navTabs.state.tabsView.slice(-1)[0]
  if (lastTab) {
    router.push(lastTab)
  } else {
    router.push('/admin')
  }
}

const closeTab = (route) => {
  navTabs.closeTab(route)
  proxy.eventBus.emit('onTabViewClose', route)
  if (navTabs.state.activeRoute?.path === route.path) {
    toLastTab()
  } else {
    navTabs.setActiveRoute(navTabs.state.activeRoute)
    nextTick(() => {
      selectNavTab(tabsRefs.value[navTabs.state.activeIndex])
    })
  }

  contextmenuRef.value.onHideContextmenu()
}

const closeOtherTab = (menu) => {
  navTabs.closeTabs(menu)
  navTabs.setActiveRoute(menu)
  if (navTabs.state.activeRoute?.path !== route.path) {
    router.push(menu.path)
  }
}

const closeAllTab = (menu) => {
  let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
  if (firstRoute && firstRoute.path == menu.path) {
    return closeOtherTab(menu)
  }
  navTabs.closeTabs(false)
  if (firstRoute) routePush(firstRoute.path)
}

const onContextmenuItem = async (item) => {
  const { name, menu } = item
  if (!menu) return
  switch (name) {
    case 'refresh':
      proxy.eventBus.emit('onTabViewRefresh', menu)
      break
    case 'close':
      closeTab(menu)
      break
    case 'closeOther':
      closeOtherTab(menu)
      break
    case 'closeAll':
      closeAllTab(menu)
      break
    case 'fullScreen':
      if (route.path !== menu?.path) {
        router.push(menu.path)
      }
      navTabs.setFullScreen(true)
      break
  }
}

const updateTab = function (newRoute) {
  // 添加tab
  navTabs.addTab(newRoute)
  // 激活当前tab
  navTabs.setActiveRoute(newRoute)

  nextTick(() => {
    selectNavTab(tabsRefs.value[navTabs.state.activeIndex])
  })
}

console.log('onBeforeRouteUpdate', onBeforeRouteUpdate)

onBeforeRouteUpdate(async (to) => {
  updateTab(to)
})

onMounted(() => {
  updateTab(router.currentRoute.value)
  new horizontalScroll(tabScrollbarRef.value)
})
</script>

<style scoped>
.dark .close-icon {
  color: v-bind('config.getColorVal("headerBarTabColor")') !important;
}

.dark .ba-nav-tab.active .close-icon {
  color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
}

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: var(--ba-main-space);
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar {
  height: 5px;
}

.nav-tabs::-webkit-scrollbar-thumb {
  background: #eaeaea;
  border-radius: var(--el-border-radius-base);
  box-shadow: none;
  -webkit-box-shadow: none;
}

.nav-tabs::-webkit-scrollbar-track {
  background: v-bind('config.layout.layoutMode == "Default" ? "none" : config.getColorVal("headerBarBackground")');
}

.nav-tabs:hover::-webkit-scrollbar-thumb:hover {
  background: #c8c9cc;
}

.ba-nav-tab {
  white-space: nowrap;
  height: 40px;
}
</style>
